<template>

	<main>
		<!---->
		<div class = "kv" :style = "{backgroundImage : 'url('+ kvInfo.img_url +')'}">
			<div  class = "intro">
				<p class = "day">{{day}}</p>
				<p class = "month" v-if = "kvInfo.volume">{{kvInfo.volume}} | {{month}} . {{year}}</p>
				<p class = "forward">{{kvInfo.forward}}</p>
				<span class = "iconfont down">&#xe62d;</span>
			</div>
		</div>
		<ul>
			<li v-for = "(item,index) of article" :key = "item.id">
				<span>{{categoryList[index]}} |</span>
				<h2>{{item.hp_title || item.question_title}}</h2>
				<p v-if = "item.hp_author">作者/{{item.hp_author}}</p>
				<div v-html = "item.hp_author ? hp_content : answer_content"></div>
				<a to = "" class = "readAll">阅读更多</a>
			</li>
			<li>
				<a class = "more">更多内容 &gt;</a>
			</li>
		</ul>

	</main>
</template>
<script>
import axios from 'axios';
export default {
	name : 'homeMain',
	data () {
		return {
			homeDate : '',
			kvInfo : {},
			monthArr : ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dec"],
			categoryList : ["阅读","问答"],
			article : []
		}
	},
 	methods : {
 		getDateInfo () {
			//获取天数（今天，或者昨天）
			axios.get("http://v3.wufazhuce.com:8000/api/onelist/idlist/?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then(this.getDateInfoSucc);
		},
		getDateInfoSucc (res) {
			let date = [];
			if(res.data.res === 0 && res.data.data) {
				date = res.data.data;
				this.getHomeInfo(date[0]);
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		},
		getHomeInfo (date) {
			axios.get("http://v3.wufazhuce.com:8000/api/onelist/"+date+"/0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then(this.getHomeInfoSucc);
		},
		getHomeInfoSucc (res) {
			if(res.data.res === 0 && res.data.data) {
				let data = res.data.data;
				this.kvInfo = data.content_list[0];
				this.homeDate = data.date;
				this.getArticle(data.content_list[1].item_id,'essay')
				this.getArticle(data.content_list[3].item_id,'question')
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		},
		getArticle (item_id,classify) {
			axios.get("http://v3.wufazhuce.com:8000/api/"+classify+"/"+item_id+"?channel=wdj&source=summary&source_id=9261&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then(this.getArticleSucc);
		},
		getArticleSucc (res) {
			if(res.data.res === 0 && res.data.data){
				this.article.push(res.data.data);
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		}
	},
	mounted () {
		this.getDateInfo()
	},
	computed : {
		day () {
			let string = this.homeDate;
			return string.substr(8,2);
		},
		month () {
			let string = this.homeDate;
			let index = parseInt(string.substr(5,2));
			return this.monthArr[index-1];
		},
		year () {
			let string = this.homeDate;
			return string.substr(0,4)
		},
		hp_content () {
			let str = this.article[0].hp_content;
			return str.substr(0,60) + "...";
		},
		answer_content () {
			let str = this.article[1].answer_content;
			return str.substr(0,70) + "...";
		}
	}
}
</script>
<style lang = "less" scoped>
	@textColor:#29a7e2;
	main {
		position: relative;
		// padding-bottom:1rem;
		.kv {
			width:100%;
			height:100vh;
			background-position: center;
			background-size: cover;
			position: relative;
			&::after {
				content:"";
				width:100%;
				height:100%;
				position: absolute;
				top:0;
				left:0;
				z-index:2;
			    background: linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
			    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
			}
			.intro {
				width:100%;
				position: absolute;
				bottom:.8rem;
				left:0;
				color:#fff;
				padding:0 .5rem;
				box-sizing: border-box;
				z-index:3;
				.day {
					font-size:.96rem;
					line-height:.96rem;
				}
				.month,.forward {
					font-size:.4rem;
					line-height:.8rem;
				}
				.forward {
					font-size:.32rem;
					line-height:.54rem;
				}
				.down {
					position: absolute;
					left:50%;
					bottom:-.6rem;
					font-size:.5rem;
					transform: translateX(-50%);
				}
			}
		}
		ul {
			li {
				padding:0 .4rem;
				>span {
					display: block;
					color : @textColor;
					font-size: .3rem;
					margin:.5rem 0 .2rem;
				}
				>h2 {
					font-size:.48rem;
					font-weight:800;
				}
				>p {
					margin:.2rem 0;
					text-indent:2em;
				}
				>div {
					/deep/ p {
						font-size:.3rem;
						line-height:.4rem;
					}
				}
				.readAll {
					display: block;
					color:@textColor;
					font-size:.3rem;
					margin:.2rem 0 1.6rem;
				}
				.more {
					display:block;
					width:2rem;
					height:.72rem;
					line-height:.72rem;
					text-align: center;
					border :1px solid #ccc;
					border-radius:.3rem;
					margin:1rem auto;
					color:#000;
				}
			}
		}
	}
</style>